<template>
  <div class="column-container">
      <div class="wraper">
        <div class="page-logo">
          <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/future.png" alt="">
        </div>
        <div class="title">
          <div class="line line-first flex-container">
            <div class="btn-dot">
            </div>
            <div class="des">
                栏目动态
            </div>
          </div>
          <div class="line line-sub">
            Column dynamics
          </div>
        </div>
        <div class="content">
          <div class="wraper flex-container">
            <div class="title-wraper height">
              <div class="top icon" @click="getIndex(-1)">
              </div>
              <div :class="[currentIndex===index ? 'active-item':'','item']"  v-for="(item,index) in topic_list" :key="index" @click="toggleIndex(index)">
                {{item.title}}
              </div>
              <div class="bottom icon" @click="getIndex(1)">
              </div>
            </div>
            <div class="des-detail height">
              {{topic_list[currentIndex].content_desc}}
            </div>
            <div class="des-png height">
              <img class="extend" :src="topic_list[currentIndex].show_url" alt="">
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import getColumns from '@/service/column/index'
export default {
  name:"column",
  data(){
    return{
      currentIndex:0,
      topic_list:[
        // {
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // },{
        //   title:'知名主持人张宏民老师在未来使命',
        //   show_url:'images/栏目动态.png',
        //   content_desc:"介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。"
        // }
      ]
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    toggleIndex(index){
      if(index === this.currentIndex){
        return
      }
      this.currentIndex = index
    },
    async init(){
      let res = await getColumns()
      console.log(res.data,90009)
      // errno
      if(res.data.errno === 0){
        this.topic_list = res.data.result.topic_list
      }
    },
    getIndex(val){
      if(val == -1){
        if(this.currentIndex == 0){
          return
        }
        this.currentIndex -= 1
      }
      if(val == 1){
         if(this.currentIndex ==9){
          return
        } 
        this.currentIndex += 1
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .column-container{
    flex: 1 0 auto;
    background: url('http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/bg-column.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .wraper{
    width: 1200px;
    margin: 0 auto;
    .page-logo{
      width: 961px;
      height: 51px;
      margin: 0px auto;
      padding: 38px 0;
    }
    .title{
      // min-width: 200px;
      text-align: center;
      margin: 0 auto;
      .line{
        justify-content: center;
        // min-width: 200px;
      }
      .btn-dot{
        width: 25px;
        height: 25px;
        margin-right: 10px;
        background: #B8262C;
      }
      .des{
        font-size: 30px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #333333;
      }
      .line-sub{
        font-size: 20px;
        // text-align: left;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #6B6B6B;
      }
    }
    .content{
      padding-top: 34px;
      padding-bottom: 87px;
      .height{
        height: 430px;
      }
      .title-wraper{
        width: 281px;
        position: relative;
        .icon{
          width: 52px;
          height: 46px;
          position: absolute;
          left: 45%;
          transform: translateX(-50%) scale(0.5);
          background-repeat: no-repeat;
          cursor: pointer;
        }
        .icon:hover{
          background-position: 100% 0;
        }
        .top{
          top: -30px;
          background: url('http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon2.png');
        }
        .bottom{
          bottom: -30px;
          background: url('http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon3.png');
        }
        .item{
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          width: 281px;
          text-overflow: ellipsis;
          font-size: 24px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #333333;
          line-height: 42px;
        }
        .active-item{
          color: #B8262C;
          border-bottom: 3px solid #B8262C;
        }
      }
      .des-detail{
        padding: 30px;
        width: 481px;
        background: #F8E9C9;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #666666;
        line-height: 29px;
        box-sizing: border-box;
        margin-left: 94px;
      }
      .des-png{
        width: 317px;
      }
    }
  }
  .flex-container{
    display: flex;
    align-items: center;
  }
  .extend{
    width: 100%;
    height: 100%;
    display: block;
  }
</style>